<template>
  <div v-loading.lock="loading" class="base-content">
    <div class="basic-info">
      <div class="base-content-operate">
        <el-button
          v-rights="'Create'"
          icon="el-icon-plus"
          type="primary"
          @click="onNew"
          >新增</el-button
        >
        <!-- <el-button
          icon="el-icon-document-copy"
          type="primary"
          @click="importData"
          >导入</el-button
        > -->
      </div>

      <div class="main-layout">
        <div class="sideBar-left">
          <!-- <el-input
            v-model="filterText"
            placeholder="输入关键字进行过滤"
            style="width: 230px"
          ></el-input> -->
          <el-tree
            ref="tree"
            :filter-node-method="filterNode"
            class="customer-tree"
            :data="treeData"
            @node-click="handleNodeClick"
          >
            <span slot-scope="{ data }" class="custom-tree-node">
              <span>
                <i v-show="data.isSampLing" class="el-icon-document"></i>
                <i v-show="!data.isSampLing" class="el-icon-folder-opened"></i>
                {{ data.unitName }}
              </span>
            </span>
          </el-tree>
        </div>
        <div class="sideBar-right">
          <div class="child-table">
            <el-table
              :data="list"
              element-loading-text="Loading"
              tooltip-effect="dark"
              height="calc(100% - 30px)"
            >
              <el-table-column align="center" label="序号" width="50">
                <template slot-scope="scope">
                  {{ scope.$index + 1 }}
                </template>
              </el-table-column>
              <el-table-column label="单位名称">
                <template slot-scope="scope">
                  {{ scope.row.unitName }}
                </template>
              </el-table-column>
              <el-table-column label="编码">
                <template slot-scope="scope">
                  {{ scope.row.code }}
                </template>
              </el-table-column>
              <el-table-column label="点位类型">
                <template slot-scope="scope">
                  {{ scope.row.pointType }}
                </template>
              </el-table-column>
              <el-table-column label="备注">
                <template slot-scope="scope">
                  {{ scope.row.remark }}
                </template>
              </el-table-column>
              <!-- <el-table-column label="采样地点">
                <template slot-scope="scope">
                  {{ scope.row.samplingPosition }}
                </template>
              </el-table-column> -->
              <el-table-column label="操作">
                <template slot-scope="scope">
                  <div class="base-table-operation">
                    <el-link
                      v-if="scope.row.parentLevel != 0"
                      v-rights="'Update'"
                      size="mini"
                      type="primary"
                      @click="handleEdit(scope.row)"
                      >编辑</el-link
                    >
                    <el-link
                      v-if="scope.row.parentLevel != 0"
                      v-rights="'Delete'"
                      size="mini"
                      type="danger"
                      @click="handleDelete(scope.row)"
                      >删除</el-link
                    >
                  </div>
                </template>
              </el-table-column>
            </el-table>
          </div>
          <BasePagination
            :total="pagination.total"
            :current-page="pagination.pageIndex"
            :page-count="pagination.total"
            @changePage="changePage"
            @sizeChange="sizeChange"
          />
        </div>
      </div>
    </div>

    <SamplingUnitEdit
      v-if="dialogFormVisible"
      ref="SamplingUnitEdit"
      :dialog-form-visible.sync="dialogFormVisible"
      :edit-id.sync="editId"
      :node-id.sync="nodeId"
      :unit-name.sync="unitName"
    />
    <SamplingUnitImportDialog
      v-if="dialogVisible"
      :dialog-visible.sync="dialogVisible"
      @load="getList"
    />
  </div>
</template>

<script>
import {
  deleteRecord,
  getList,
  getSamplingUnitTree,
  getTopNode,
} from "../../../api/Sampling/SamplingUnit.js";
import SamplingUnitEdit from "./SamplingUnitEdit.vue";
import SamplingUnitImportDialog from "../../../components/SamplingManage/SamplingUnitImportDialog.vue";
export default {
  name: "SamplingUnitList",
  components: { SamplingUnitEdit, SamplingUnitImportDialog },
  data() {
    return {
      dialogVisible: false,
      loading: true,
      list: [],
      treeData: [],
      editId: "",
      unitName: "",
      queryForm: {
        unitName: "",
        rankOrder: 0,
        parentLevel: 0,
        creatorId: 0,
      },
      nodeId: "",
      dialogFormVisible: false,
      pagination: {
        pageIndex: 1,
        pageSize: 10,
        total: 0,
      },
    };
  },
  created() {
    getTopNode().then((res) => {
      this.queryForm.parentLevel = res.data.id;
      this.getTreeList();
    });
  },
  methods: {
    // 导入
    importData() {
      this.dialogVisible = true;
    },
    // 点击树节点
    handleNodeClick(val) {
      this.queryForm.parentLevel = val.id;
      this.nodeId = val.id;
      this.unitName = val.unitName;
      this.changePage();
    },
    // 点击树节点
    filterNode(value, data) {
      if (!value) return true;
      return data.label.indexOf(value) !== -1;
    },
    changePage(val) {
      this.pagination.pageIndex = val;
      this.getList();
    },
    sizeChange(val) {
      this.pagination.pageIndex = 1;
      this.pagination.pageSize = val;
      this.getList();
    },
    cancelForm() {
      this.$refs.queryForm.resetFields();
      this.pagination.pageIndex = 1;
      this.getList();
    },
    getTreeList() {
      var data = {};
      getSamplingUnitTree(data).then((res) => {
        this.treeData = res.data;
      });
      this.getList();
    },
    getList() {
      this.loading = true;
      getList(this.queryForm, this.pagination)
        .then((res) => {
          this.list = res.data.dataList ? res.data.dataList : [];
          this.pagination.total = res.data.total;
          this.loading = false;
        })
        .catch(() => {
          this.loading = false;
        });
    },
    onNew() {
      this.dialogFormVisible = true;
    },
    handleDelete(rowData) {
      this.Helper.deleteConfirm(() => {
        this.loading = true;
        deleteRecord({ id: rowData.id })
          .then((res) => {
            this.getList();
            this.getTreeList();
            this.loading = false;
          })
          .catch(() => {
            this.loading = false;
          });
      });
    },
    handleEdit(rowData) {
      this.editId = rowData.id;
      this.dialogFormVisible = true;
    },
    onQuery() {
      this.getList();
    },
  },
};
</script>
<style lang="scss">
.DetectionItem-menu-content {
  padding: 0;
  background: #f8fbff;
  display: flex;
  align-items: flex-start;
  .menu-tree {
    width: 290px;
    height: 100%;
    overflow: auto;
    .menu-tree-header {
      width: 100%;
      padding: 16px 12px 12px;
      box-sizing: border-box;
      color: #4e4e4e;
      display: flex;
      align-items: center;
      & > span {
        font-size: 14px;
        font-weight: 600;
        display: block;
        margin-right: 12px;
      }
    }
    .el-tree {
      height: calc(100% - 64px);
      overflow: auto;
    }
  }
  .menu-detail {
    width: calc(100% - 260px);
    height: 100%;
    background: #fff;
    padding: 20px 0 20px 20px;
    overflow-y: auto;
    box-sizing: border-box;
    position: relative;
    display: block;
    align-items: flex-start;
    .menu-content {
      width: 50%;
      border-right: 1px #dedede solid;
    }
    .empty {
      height: calc(100% - 40px);
    }
    .menu-operation {
      width: 50%;
      padding: 0 24px;
      box-sizing: border-box;
    }
  }
  .customer-tree {
    background: #f8fbff;
    .el-tree-node__content {
      height: 40px;
      line-height: 40px;
      &:hover {
        color: #4787ff;
        background: rgba(47, 113, 245, 0.2);
      }
      .el-tree-node__label {
        font-size: 12px;
      }
      .el-tree-node__expand-icon {
        font-size: 16px;
        font-weight: bold;
        color: #999;
      }
      .is-leaf {
        color: transparent;
      }
    }
    .is-current {
      & > .el-tree-node__content {
        .el-tree-node__label {
          color: #4787ff;
          font-weight: 600;
        }
        .el-tree-node__expand-icon {
          color: #4787ff;
        }
        .is-leaf {
          color: transparent;
        }
      }
    }
  }
  .menu-form {
    margin-top: 32px;
    .el-form-item--small {
      margin-right: 24px;
    }
    .el-select {
      width: 100%;
    }
  }
}
</style>
